<template>
<div>
  <body class="body">
    <!-- 商品详情页 -->
    <div class="container">
      <!-- 顶部：面包屑导航 -->
      <ul class="breadcrumb">
          <span>您当前所在的位置是:</span>
          <li class="breadcrumb-item">
              <a href="javascript:;">IDLOVES</a>
          </li>
          <li class="breadcrumb-item">
              <a href="javascript:;">同志爱情对戒</a>
          </li>
          <li class="breadcrumb-item">
              <a href="javascript:;">对戒</a>
          </li>
          <li class="breadcrumb-item">
              <a href="javascript:;">{{list.title}}</a>
          </li>
      </ul>
      <div class="row bg-white m-0">
        <!-- 放大镜和商品信息 -->
        <!-- 小图部分 -->
        <div class="col-1 pr-0 m-3 px-3">
          <ul class="xs_img">
            <li class="mb-2"><img src="http://127.0.0.1:3000/xs/top.png" /></li>
            <li class="active"><img class="w_50 my-2" src="http://127.0.0.1:3000/46_thumb_P_1440548965270.jpg"/></li>
            <li><img class="w_50 my-2" src="http://127.0.0.1:3000/46_thumb_P_1440549043606.jpg" /></li>
            <li><img class="w_50 my-2" src="http://127.0.0.1:3000/46_thumb_P_1440549043160.jpg" /></li>
            <li><img class="w_50 my-2" src="http://127.0.0.1:3000/46_thumb_P_1440549043290.jpg" /></li>
            <li class="mt-2"><img src="http://127.0.0.1:3000/xs/bottom.png" /></li>
          </ul>
        </div>
        <!-- 中图部分 -->
        <div class="col-4 m_center px-3 m-3">
          <img class="w-100" src="http://127.0.0.1:3000/23746_88_(1).jpg" /><br>
          <span>收藏商品</span>
          <span>分享到：</span>
        </div>
        <!-- 商品信息部分 -->
        <div class="col-6 right_con px-3 mt-3">
          <h4>{{list.title}}</h4>
          <h2>￥{{list.price}}元</h2>
          <div class="row">
            <span class="col-4">最近售出：{{list.sold_count}}</span>
            <span class="col-4">用户评论：5</span>
            <span class="col-4">收藏人气：0</span>
          </div>
          <div><hr></div>
          <div class="row mb-2">
            <span class="col-6">钻石重量(ct)：{{list.weight}}</span>
            <span class="col-6">钻石颜色(color)：{{list.color}}</span>
          </div>
          <div class="row">
            <span class="col-6">钻石净度(clarity)：{{list.neatness}}</span>
            <span class="col-6">钻石切工(cut)：{{list.cut}}</span>
          </div>
          <!-- 下单购买选择详情 -->
          <div class="row shop_msg p-2 m-0 mt-3">
            <div class="col-2 p-0">
              <div>材质：</div>
              <div>购买方式：</div>
              <div>手寸：</div>
              <div>刻字：</div>
            </div>
            <div class="col-10 p-0">
              <div class="texture">
                <button class="mt-3">18K白金</button>
              </div>
              <div>
                <button class="mt-3 mr-3">单只</button>
                <button class="active mt-3">一对</button>
              </div>
              <div class="mt-3">
                <select name="" id="" class="mr-3">
                  <option value="请选择手寸">请选择手寸</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                </select>
                <span><a href="javascript:;">如何测量？</a><a href="javascruipt:;">联系客服</a></span>
              </div>
              <div class="letter">
                T
                <input type="text"><br>
                P
                <input type="text">
              </div>
            </div>
          </div>
          <span class="bot_text">中国大陆用户付款后15个工作日内可收到货品，其他地区咨询客服</span><br>
          <button class="gosho mb-2">
            <img src="http://127.0.0.1:3000/header_shopping.png" />
            加入购物车
          </button>
          <button class="masho mb-2">
            <img class="w-10" src="http://127.0.0.1:3000/shop.png" />
            立即购买
          </button>
        </div>
      </div>
      <!-- 选项卡导航-->
      <div class="select_nav mt-3">
        <ul class="nav nav-tabs m-0">
          <li class="p-0 mx-1 nav-item">
            <a class="nav-link active" data-toggle="tab" href="#tab1">商品详情</a>
          </li>
          <li class="p-0 mx-1 nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab2">如何购买</a>
          </li>
          <li class="p-0 mx-1 nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab3">售后服务</a>
          </li>
          <li class="p-0 mx-1 nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab4">最新评论</a>
          </li>
          <li class="p-0 mx-1 nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab5">常见问题</a>
          </li>
        </ul>
      </div>
      <!-- 选项卡的内容-->
      <div class="tab-content">
        <div id="tab1" class="tab-pane active bg-white py-4 px-1">
          <div class="row msg_det mt-0 py-4">
            <div class="ml-3 col-4">
              <div class="row">
                <div class="col-3 p-0">
                  <div class="msg_title">款式信息</div>
                  <div class="msg_title">钻石信息</div>
                </div>
                <div class="col-9 p-0">
                  产品编号： <span>{{list.product_id}}</span><br>
                  重量： <span>{{list.weight}}</span>
                </div>
              </div>
            </div>
            <div class="col-2 p-0">
              证书类型： <span>{{list.ccie}}</span><br>
              净 度： <span>{{list.neatness}}</span>
            </div>
            <div class="col-3">
              材质： <span>{{list.texture}}</span><br>
              颜色： <span>{{list.color}}</span>
            </div>
            <div class="col-2 p-0">
              切工： <span>{{list.cut}}</span>
            </div>
          </div>
          <!-- 商品详情系列N多图片 -->
          <div v-html="list.details"></div>
        </div>
        <div id="tab2" class="tab-pane bg-white">
          <img src="http://127.0.0.1:3000/20141114040921edff6f7239.jpg" />
        </div>
        <div id="tab3" class="tab-pane bg-white">
          <img src="http://127.0.0.1:3000/201411140408514e81071ba7.jpg" />
        </div>
        <div id="tab4" class="tab-pane bg-white">暂无评论</div>
        <div id="tab5" class="tab-pane bg-white">暂无问题</div>
      </div>
    </div>
  </body>
</div>
</template>
<script>
export default {
      data(){
    return {
      list:[]
    }
  },
  created() {
    var url=window.location.href;
    // 提取地址中的sid值
    // var sid=url.split("?")[1].split("=")[1];
    var rid=url.split("=")[1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ];
    this.axios.get("details",{params:{rid}}).then(res=>{
      if(res.data.code==1){
        this.list=res.data.data[0];
      }
    })
  }
}
</script>
<style scoped>
.body{
    background:#f3fcfe!important;
}
.breadcrumb{
    background: transparent;
    font-size:14px;
}
.breadcrumb-item a{
    color:#999;
    text-decoration: none;
}
.breadcrumb>:last-child a{
    color:#000;
}
.breadcrumb-item+.breadcrumb-item::before{
    content:">";
}
ul li{
    list-style: none;
}
/* 所有a标签去下划线 */
a :hover{
    text-decoration: none;
}
.xs_img{
    text-align: center;
    padding:0px;
}
.xs_img .w_50{
    width:100%;
    border:1px solid #ddd;
}
.m_center .w-85{
  width:90%;
}
.m_center span{
  color:#999;
  margin: 10px;
}
.m_center :nth-child(3){
  color:#8e4f1b;
}
.right_con h2{
  color:#22abcc;
}
.right_con .row span{
  font-size:14px;
  color:#999;
}
.shop_msg{
  background: #f3fcfe
}
.shop_msg .col-2 div{
  margin:20px 0px;
  font-size:14px;
  color:#666;
}
.shop_msg .col-10 .texture button,
.shop_msg .col-10 :nth-child(2) button{
  height:28px;
  line-height: 14px;
  border-radius: 0;
}
.shop_msg .col-10 div select{
  height:28px;
  width:150px;
  line-height:14px;
  font-size:10px;
  padding:0px 10px;
  border:1px solid #ddd !important;
  border-radius: 0;
}
.shop_msg .col-10 .letter input{
  width:150px;height:24px;
  line-height: 14px;
  font-size:10px;
  border-radius: 0;
  padding:0px 10px;
}
.right_con .bot_text{
  display: inline-block;
  margin: 20px 0px 5px 0px;
  font-size:12px;
  color:#666;
}
.right_con .gosho,.right_con .masho{
  border:0;
  border-radius: 0;
  background: #22abcc;
  color:#fff;
  margin-right: 20px;
}
.right_con .masho .w-10{
  width:20px;
}
.body .container .select_nav .nav{
  background: #f4f4f4 !important;
}
/* div.select_nav>ul.nav-tabs>li.nav-item>a.nav-link.active{
  border:0 !important;
  border-top:2px solid #22abcc !important;
}  */
.nav-tabs .nav-link{
  font-size:10px;
  color:#666;
}
.nav-tabs .nav-link.active{
  font-size:14px;
  border-radius: 0;
  border:0 !important;
  border-top:2px solid #22abcc !important;
}
.tab-pane .msg_det{
  margin:33px;
  background: #f3fcfe !important;
  font-size:12px;
  color:#666;
}
.tab-pane .msg_det .msg_title{
  font-size:14px;
  color:#000;
}
.msg_det :nth-child(4){
  margin-left:-20px;
  padding-top:20px !important;
}
</style>


